<template>
  <div class="foot">
    <ul class="footer flex jc-sa w100pc fixed bott0 bg-fff aic">
      <li>
        <router-link to="/home" class="flex2 aic" :class="{yellow:page==='home'}">
          <i class="iconfont f22 iconhome"></i>
          <p class="mt-5 f10">首页</p>
        </router-link>
      </li>
      <li>
        <router-link to="/address" class="flex2 aic" :class="{yellow:page==='address'}">
          <i class="iconfont f20 iconlocation"></i>
          <p class="mt-5 f10">目的地</p>
        </router-link>
      </li>
      <li>
        <router-link to="/submitNeed" class="flex2 aic" :class="{yellow:page==='need'}">
          <i class="iconfont f24 iconadd1 needbg"></i>
          <p class="mt-5 f10">提交需求</p>
        </router-link>
      </li>
      <li>
        <router-link to="/find" class="flex2 aic" :class="{yellow:page==='find'}">
          <i class="iconfont f20 iconfind"></i>
          <p class="mt-5 f10">发现</p>
        </router-link>
      </li>
      <li>
        <router-link to="/my" class="flex2 aic" :class="{yellow:page==='my'}">
          <i class="iconfont f20 iconmy"></i>
          <p class="mt-5 f10">我的</p>
        </router-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: ["page"]
};
</script>

<style>
.footer {
  border-top: 1px solid #ebebeb;
  height: 50px;
  position: fixed;
  bottom: 0;
  width: 100%;
  bottom: 0;
}
.needbg {
  background: #ff8200;
  border-radius: 50%;
  color: #ffffff;
}
.foot {
  height: 50px;
}
.yellow {
  color: #ff8200;
}
</style>
